<template>
	<view class="market-fenlei">
		<view class="hede">
			<view class="back">
				<uv-icon name="arrow-left" color="#333" size="18" @click="back" />
			</view>
			<view class="nav">
				<scroll-view scroll-x style="white-space: nowrap;" :scroll-into-view="'tab-' + active_id"
					scroll-with-animation>
					<view :id="'tab-'+e.id" class="shop_item" :key="index" @click="fenleiClick(i,e)" v-for="(e,i) in navList">
						<image :src="e.pic" class="thumb" />
						<view :class="['name', e.id === active_id ? 'active' : '']" style="margin: 5px 0 10px 0;">
							<text>{{ e.cate_name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="content">
			<view class="left" v-if="newNavList1.length">
				<view @click="fenleiClick1(i, e.id)" v-for="(e, i) in newNavList1" :key="e.id"
					:class="['nav-item', fenlei1 === i ? 'active' : '']">
					{{e.cate_name}}
				</view>
			</view>
			<view class="right">
				<view class="tabs">
					<view :class="['item', sort.index == 0 ? 'active' : '']" @click="tabsClick(0)">
						<text>综合排序</text>
						<uv-icon size="14" :color="sort.index == 0 ? '#C52923' : '#333'"
							:name="sort.type == 0 ? 'arrow-down-fill' : 'arrow-up-fill'" />
					</view>
					<view :class="['item', sort.index == 1 ? 'active' : '']" @click="tabsClick(1)">
						<text>销售量</text>
					</view>
					<view :class="['item', sort.index == 2 ? 'active' : '']" @click="tabsClick(2)">
						<text>好评</text>
					</view>
				</view>
				<view class="item" v-for="e in list" :key="e.id" @click="goDetails(e.id)">
					<uv-image :src="e.image" width="70" height="70" radius="5" />
					<view class="info">
						<view>
							<uv-text :text="e.store_name" lines="1" color="#333" size="14" />
							<uv-text :text="`已售 ${e.sales}+`" color="#8F9090" size="10" />
						</view>
						<view class="flex justify-between">
							<view class="flex" style="align-items: self-start;">
								<text style="color: #D68C31;font-size: 28upx;">¥</text>
								<uv-text :text="e.price" color="#D68C31" size="28upx" />
							</view>
							<!-- <view @click.stop="addCart(e.id)">
								<uv-button text="立即购买" size="mini" color="#D68C31" shape="circle" />
							</view> -->
						</view>
					</view>
				</view>
				<uv-empty mode="data" text="商品为空" v-if="list.length === 0" />
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue'
	import {
		getMarketProduct
	} from '@/api'

	const props = defineProps({
		cid: {
			type: String,
			default: ''
		},
		navList: {
			type: Array,
			default: () => []
		}
	})

	const emit = defineEmits(['tabbar'])


	const page = ref(1)
	const total = ref(0)
	const list = ref([])
	const fenlei = ref(0)
	const fenlei1 = ref(0)
	const category_id = ref(0)
	const active_id = ref(0)
	const sort = ref({
		index: 0,
		type: 0
	})

	const newNavList1 = computed(() => {
		const child = props.navList[fenlei.value].child
		return child.length > 0 ? child : []
	})




	const back = () => {
		emit('tabbar', 0)
	}

	const fenleiClick = (i,e) => {
		if (active_id.value === e.id) return
		fenlei.value = i
		page.value = 1
		active_id.value = e.id
		if (e.child.length > 0) {
			category_id.value = e.child[0].id
			getProduct()
		} else {
			list.value = []
		}
	}

	const fenleiClick1 = (i, id) => {
		if (fenlei1.value === i) return
		page.value = 1
		fenlei1.value = i
		category_id.value = id
		getProduct()
	}

	const tabsClick = (i) => {
		if (sort.value.index === i) return
		page.value = 1
		sort.value.index = i
		getProduct()
	}

	const goDetails = (id) => {
		uni.navigateTo({
			url: '/pages-home/market/details?id=' + id
		})
	}

	const getProduct = async () => {
		if (page.value === 1) list.value = []
		const {
			result
		} = await getMarketProduct({
			page: page.value,
			limit: 10,
			category_id: category_id.value,
			sort: sort.value.index
		})
		total.value = result.total
		list.value = [...list.value, ...result.data]
		page.value++
	}

	const addCart = (id) => {
		console.log(id);
	}

	watch(() => props.cid, (newVal) => {
		if (parseInt(newVal) > 0) {
			fenlei.value = props.navList.findIndex(item => item.id === newVal)
			active_id.value = newVal
			category_id.value = newVal
			getProduct()
		}
	}, {
		immediate: true,
		deep: true
	})

	const init = async () => {
		if (props.cid == '') {
			active_id.value = props.navList[0].id
			category_id.value = props.navList[0].id
			getProduct()
		}
	}

	init()
</script>

<style lang="scss" scoped>
	.market-fenlei {
		display: flex;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		height: calc(100vh - 50px);
	}

	.hede {
		top: 0;
		width: 100%;
		z-index: 10;
		position: fixed;
		min-height: calc(260upx + var(--status-bar-height));
		background: linear-gradient(to bottom, #EBADB1, #F5E8E9);

		.back {
			margin-left: 30upx;
			margin-top: calc(var(--status-bar-height) + 30upx);
		}

		.nav {
			margin: 0 30upx;
			overflow: hidden;
			/* #ifdef MP-WEIXIN */
			margin-top: 60upx;

			/* #endif  */
			.navList {
				width: 100%;
			}

			.shop_item {
				display: inline-block;
				margin: 0 18upx;
				text-align: center;

				.thumb {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					text-align: center;
				}
			}

			.expand {
				display: flex;
				align-items: center;
				flex-direction: column;

				text {
					font-size: 28upx;
				}
			}

			.name {
				color: #333;
				font-size: 24upx;
				padding: 6upx 10upx;
				border-radius: 10upx;
			}

			.active {
				color: #C42923;
				background-color: #F3AEB7;
			}
		}
	}

	.content {
		flex: 1;
		overflow: hidden;
		height: calc(100vh - var(--status-bar-height) - 260upx);
		display: flex;
		background: #ccc;
		margin-top: calc(260upx + var(--status-bar-height));

		.left {
			width: 240upx;
			overflow: auto;
			background-color: #F4F4F4;

			.nav-item {
				color: #333;
				font-size: 28upx;
				height: 90upx;
				line-height: 90upx;
				text-align: center;
			}

			.active {
				color: #C52923;
				background-color: #fff;
			}
		}

		.right {
			flex: 1;
			overflow: auto;
			background-color: #FFF;

			.tabs {
				top: 0;
				display: flex;
				height: 90upx;
				align-items: center;
				background: #fff;
				position: sticky;
				justify-content: space-around;

				.item {
					display: flex;
					font-size: 28upx;

					text {
						margin-right: 6upx;
					}
				}

				.active {
					color: #C52923;
				}
			}

			.item {
				padding: 14upx;
				font-size: 28upx;
				display: flex;

				.info {
					width: 100%;
					display: flex;
					margin-left: 20upx;
					flex-direction: column;
					justify-content: space-between;
				}
			}
		}
	}
</style>